/**
 * 江苏省智能装备产业联盟 v4 use `@ant-design/pro-layout` to handle Layout.
 * You can view component api by:
 * https://github.com/ant-design/ant-design-pro-layout
 */
import ProLayout, { DefaultFooter } from '@ant-design/pro-layout';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { Link, useIntl, connect, history } from 'umi';
import { Result, Button, Layout, Input, Menu, Dropdown, Grid, Avatar } from 'antd';
import Authorized from '@/utils/Authorized';
import Logo from '@/components/Logo';
import { CaretDownOutlined } from '@ant-design/icons';
import { Scrollbars } from 'react-custom-scrollbars';
import Footer from '@/components/Footer'


const { useBreakpoint } = Grid;
const { Header, Sider, Content } = Layout;
const noMatch = (
  <Result
    status={403}
    title="403"
    subTitle="Sorry, you are not authorized to access this page."
    extra={
      <Button type="primary">
        <Link to="/user/login">返回登录</Link>
      </Button>
    }
  />
);

const BasicLayout = (props) => {
  let { children, location, login: { lastlogininfo }, dispatch } = props;
  const screens = useBreakpoint();
  const menu = (
    <Menu>
      <Menu.Item>
        <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
          产品中心
        </a>
      </Menu.Item>
      <Menu.Item>
        <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
          成功案例
        </a>
      </Menu.Item>

      <Menu.Item danger onClick={() => {
        const { dispatch } = props;
        dispatch({
          type: 'login/logout',
        });
      }}>
        退出登录
      </Menu.Item>
    </Menu>
  );


  useEffect(() => {
    ///ngic-promote-company/epCompany/query
    let token = localStorage.getItem("TOKEN");
    if (!token) {
      return
    }
    dispatch({
      type: 'global/companyinfo',
      payload: {},
    });


  }, [])

  return (
    <Layout>
      <Header style={{ height: "auto", backgroundColor: "#fff", padding: 0, display: "block", lineHeight: "inherit" }}>
        <div className="gcheader">
          <div className='content spacebt' style={{ color: "#fff" }}>
            {
              !screens.md ? null : <span>您好,欢迎来到江苏省智能装备产业联盟</span>
            }

            <span className="rowcenter">
              {
                lastlogininfo.userName
                  ?
                  <Dropdown overlay={menu}>
                    <Link to="/gc" style={{ color: "#fff" }} className="rowcenter">
                      <Avatar size="small">{lastlogininfo.userName.substr(0, 1)}</Avatar>
                      &nbsp;
                      {lastlogininfo.userName}
                      &nbsp;
                      <CaretDownOutlined />
                    </Link>
                  </Dropdown>
                  :
                  <Link to="/user" style={{ color: "#fff" }}>
                    登录
                  </Link>
              }

              <Link to="/user/signin" style={{ color: "#fff", marginLeft: 20 }}>企业注册</Link>
            </span>
          </div>
        </div>
        <div style={{ padding: "20px" }}>
          <div className='content spacebt'>
            <Logo logotext={true} size={!screens.md ? "small" : "default"} hidetitle={!screens.sm}></Logo>
            {
              location.pathname.indexOf("/firm") == -1 &&
              <div style={{ fontSize: 16 }}>
                <Link className={location.pathname == "/welcome" ? "actives" : "noactive"} to="/welcome">
                  首页
                </Link>
                <Link to="/support/prod" className={location.pathname.indexOf("/support") != -1 ? "actives" : "noactive"} style={{ marginLeft: 28 }}>产品供应</Link>
              </div>
            }

          </div>

        </div>
      </Header>


      <Content style={{ backgroundColor: "#fff", width: "100%", height: "calc( 100vh - 136px)", overflow: "hidden" }}>

        <Scrollbars
          thumbMinSize={10}
          autoHide
          style={{ height: '100%' }}
          hideTracksWhenNotNeeded={true}
        >
          <Authorized noMatch={noMatch}>
            {children}
            <Footer>
            </Footer>
          </Authorized>

        </Scrollbars>
      </Content>

    </Layout>

  );
};

export default connect(({ global, login }) => ({
  global,
  login,
}))(BasicLayout);
